<!doctype html><!--声明文档类型为html-->
<html><!--根标签 超文本标记语言-->
<!--99%是双标签 -->
	<head><!--头部 不可视化标签-->
		<meta charset="UTF-8"><!--utf-8 :国际编码-->
		<!--网页三要素-->
		<title>同学们-朱雀老师</title>
	    <meta name="Keywords" content="认真上课"><!--关键词-->
		<meta name="Description" content="描述">
		<style type="text/css">
			/* 
				通配符选择器：选择到页面中所有的元素
				缺点：浪费性能 每个标签执行8次 降低加载速度
			*/
			*{
				margin:0;
				padding:0;
			}
			/*多元素选择器 ：用逗号隔开*/
			p,ul,li,ol,h1,body,h2,h3,h4,h5,h6{
				margin:0;
				padding:0;
			}
			li{list-style:none;}
			a{text-decoration:none;}
			img{
				border:0;
			}
			
			div{
				width:100px;
				height:100px;
				border:1px solid red ;
			}
			p{
				border:1px solid blue;
			}
			li{
				margin-left:100px;
			}
			/*	
				块级元素 display:block;
				1.会换行显示,默认占据一行
				2.支持宽高
				-不给宽高的时候 又没有内容的时候  宽度继承浏览器的宽度 高度0
				-有内容的时候 ,内容可以撑开高度 但是不能影响宽度
				-有固定高度的时候  内容无法撑开高度
				3.支持margin padding
			*/
			div{
				width:10px;
				height:20px;
				/* border:1px solid red; */
				/* margin:100px auto; */
				/* padding:20px; */
			}
			/*
				内联元素:行内元素  display:inline;
				1.友好横排显示 只占据内容的区域
				2.不支持宽高 内容撑开宽高
				3.margin只有左右有效果 上下没有效果  不支持margin auto
				4.支持padding 上下对别的元素不影响
			
			*/
			span{
				/* width:100px;
				height:100px; */
				border:1px solid blue;
				/* margin:20px; */
				padding:40px 20px;
				margin:auto;
			}
			/*
				元素嵌套规则
				1.块级元素可以套任意元素 p标签不能套块级 h1~h6最好不要套块级
				2.内联元素 不可以套块级元素  a标签不能套a标签
				3.内联元素变成内联块元素或者块级元素,还是不要套块级
			*/
		</style>
	</head>
	<body> <!--身体:网页的内容.可视化标签-->
		<div></div>
		<p>我在这里</p>
		<ul>
			<li>不离不弃</li>
		</ul>
		<span>我是你们的大可爱</span>
		<a href="">去除下划线</a>
	</body>
</html>


